﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
        <!-- general -->
    <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
    <!-- end general -->
    

<script type="text/javascript">
    $('document').ready(function () {
        updatestatus();
        scrollalert();
    });
    function updatestatus() {
        //Show number of loaded items
        var totalItems = $('#content p').length;
        $('#status').text('Loaded ' + totalItems + ' Items');
    }
    function scrollalert() {
       // alert('yes');
        var scrolltop = $('#scrollbox').scrollTop();
        //var scrollheight = $('#scrollbox').attr('scrollHeight');
        var scrollheight = $('#scrollbox').height();
        //var windowheight = $('#scrollbox').attr('clientHeight');
        var windowheight = window.innerHeight;
        var scrolloffset = 20;
        //alert(scrolltop);

        console.log('scrolltop: ' + scrolltop);
        console.log('scrollheight: ' + scrollheight);
        console.log('windowheight: ' + windowheight);

        if (scrolltop >= (scrollheight - (windowheight + scrolloffset))) {
            //fetch new items
            $('#status').text('Loading more items...');
            $.get('new-items.html', '', function (newitems) {
                $('#content').append(newitems);
                updatestatus();
            });
        }
        setTimeout('scrollalert();', 1500);
    }
</script>
<style type="text/css" >
	#container{ width:400px; margin:0px auto; padding:40px 0; }
	#scrollbox{ width:400px; height:300px;  overflow:auto; overflow-x:hidden; border:1px solid #f2f2f2; }
	#container > p{ background:#eee; color:#666; font-family:Arial, sans-serif; font-size:0.75em; padding:5px; margin:0; text-align:right;}
</style>
</head>
<body>
  <div id="container">
	<div id="scrollbox">
		<div id="content" >
			<p>Lorem ipsum dolor sit amet</p>
			<p>Ipsum lorem dolor amet sit</p>
			<p>Dolor lorem ipsum amet tis</p>
			<p>Lorem ipsum dolor sit amet</p>
			<p>Ipsum lorem dolor amet sit</p>
			<p>Dolor lorem ipsum amet tis</p>
			<p>Lorem ipsum dolor sit amet</p>
			<p>Ipsum lorem dolor amet sit</p>
			<p>Dolor lorem ipsum amet tis</p>
		</div>
	</div>
	<p><span id="status" ></span></p>
</div>

<hr />
<p>
Demo Provided By: <a href="http://webdeveloperplus.com" title="Web Developer Plus - Ultimate Web Development & Design Resource" >Web 
Developer Plus</a></p>
</body>
</html>